<template>
  <div class="un">
    <div class="un-flow">
      <div class="flow-title">3 Reasons to Join Promotion Alliance</div>
      <Row :gutter="80" style="padding: 0 35px;">
        <Col span="8">
        <div class="flow-list">
          <img src="@/assets/images/alliance/flow1.png" class="flow-img" alt="">
          <div class="flow-desc color1">Permanent Income</div>
          <div class="desc-text">
            New users referred by you will establish a permanent binding relationship with you,
            bringing you a continuous stream of commission income from shipping fees.
          </div>
        </div>
        </Col>
        <Col span="8">
        <div class="flow-list">
          <img src="@/assets/images/alliance/flow2.png" class="flow-img" alt="">
          <div class="flow-desc color2">Multi-level Income</div>
          <div class="desc-text">
            As a V1 level promoter, you will receive 4.5% direct commission (the next level is 5%). What's even better
            is that you can also earn an additional 2% from second-tier users.
          </div>
        </div>
        </Col>
        <Col span="8">
        <div class="flow-list">
          <img src="@/assets/images/alliance/flow3.png" class="flow-img" alt="">
          <div class="flow-desc color3">Product Commission</div>
          <div class="desc-text">
            Simply by sharing product affiliate link, you can earn a 1% commission from purchases made by non-newly
            registered users.
          </div>
        </div>
        </Col>
      </Row>
    </div>
    <div class="list-sty">
      <div class="un-prize">
        <div class="pr-head">
          <Row>
            <Col span="9">
            <div class="first-title">Best Promoter of the Week</div>
            </Col>
            <Col span="5">
            <div class="def-name">运费佣金</div>
            </Col>
            <Col span="5">
            <div class="def-name"> 产品佣金</div>
            </Col>
            <Col span="5">
            <div class="def-name">Total commission income</div>
            </Col>
          </Row>
        </div>
        <div class="body-content">
          <Row style="margin-top: 32px;" v-for="item in dataList" :key="item.id">
            <Col span="9">
            <div class="first-body">
              <div class="raking">{{ item.id }}</div>
              <img :src="item.image" class="user-img" alt="">
              <div class="info">
                <div class="name">{{ item.name }}</div>
                <div class="invite-info">Invited <span>8240</span> Users</div>
              </div>
            </div>
            </Col>
            <Col span="5">
            <div class="amount-test">CNY 4399.09</div>
            </Col>
            <Col span="5">
            <div class="amount-test"> CNY 4399.09</div>
            </Col>
            <Col span="5">
            <div class="amount-test">CNY 4399.09</div>
            </Col>
          </Row>
        </div>
      </div>
      <div class="join-sty">
        <div class="join-btn" @click="joinMet()">Join Now</div>
      </div>
    </div>
    <div class="agree-sty">
      <Checkbox v-model="form.agree">点击上方“Join Now”即表示已同意
        <router-link :to="`/notice/${articleAgreementIndividual && articleAgreementIndividual.id}`" target="_blank"
          class="rule-item">《 100buy 推广协议》</router-link>
      </Checkbox>
    </div>
  </div>
</template>
<script>

import { mapState } from "vuex";
import { joinProAll } from "@/api/invite";
import { pointUser } from "@/common/point/api-hook";//打点日志
export default {
  data() {
    return {
      dataList: [
        { id: '01', name: 'vi**e', image: require('@/assets/images/alliance/ex1.png') },
        { id: '02', name: 'J**n', image: require('@/assets/images/alliance/ex2.png') },
        { id: '03', name: 'Ja**n', image: require('@/assets/images/alliance/ex3.png') },
        { id: '04', name: 'S**', image: require('@/assets/images/alliance/ex4.png') },
        { id: '05', name: 'P**er', image: require('@/assets/images/alliance/ex5.png') },
        { id: '06', name: 'K**', image: require('@/assets/images/alliance/ex6.png') }
      ],
      form: {
        agree: false
      }
    }
  },
  computed: {
    ...mapState({
      articleAgreementIndividual: (state) => {
        // 100buy平台推广协议-个人
        let obj = '';
        if (state.config.config) {
          obj = state.config.config.articleMap.CFG_ARTICLE_INDIVIDUAL_PROMOTION;
        }
        return obj;
      }
    })
  },
  methods: {
    joinMet() {
      this.form.agree = true;
      // 加入
      joinProAll().then(() => {
        pointUser('actions', '3002');
        location.reload();
        this.form.agree = false;
      })
    }
  }
}
</script>
<style lang="less" scoped>
.un {

  &-flow {
    padding: 31px 40px 75px 40px;
    background: #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    border: 1px solid #E8E8E8;
    margin-top: 32px;

    .flow-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 20px;
      color: #1E1714;
      line-height: 23px;
      margin-bottom: 27px;
    }

    .flow-list {

      .flow-img {
        width: 72px;
        height: 72px;
      }

      .flow-desc {
        font-family: Open Sans, Open Sans;
        font-weight: 600;
        font-size: 20px;
        line-height: 23px;
        margin-bottom: 16px;
      }

      .color1 {
        color: #3C61FF;
      }

      .color2 {
        color: #49BC19;
      }

      .color3 {
        color: #8000FF;
      }

      .desc-text {
        font-family: Open Sans, Open Sans;
        font-weight: 400;
        font-size: 16px;
        color: #1E1714;
        line-height: 19px;
      }
    }
  }

  .list-sty {
    position: relative;

    .un-prize {
      padding: 36px 0;
      background: #FFFFFF;
      border-radius: 16px 16px 16px 16px;
      margin-top: 32px;

      .pr-head {
        padding-bottom: 29px;
        border-bottom: 1px solid #DADADA;

        .first-title {
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 20px;
          color: #1E1714;
          line-height: 23px;
          margin-left: 40px;
        }

        .def-name {
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 16px;
          color: #767B93;
          line-height: 19px;
          text-align: center;
        }
      }

      .body-content {
        :deep(.ivu-row) {
          align-items: center;
        }

        .first-body {
          display: flex;
          align-items: center;
          gap: 16px;
          margin-left: 40px;

          .raking {
            font-family: Open Sans, Open Sans;
            font-weight: bold;
            font-size: 18px;
            color: #000000;
            line-height: 21px;
          }

          .user-img {
            width: 65px;
            height: 65px;
          }

          .info {
            display: flex;
            flex-direction: column;

            .name {
              font-family: Open Sans, Open Sans;
              font-weight: 600;
              font-size: 16px;
              color: #767B93;
              line-height: 19px;
            }

            .invite-info {
              font-family: Open Sans, Open Sans;
              font-weight: 600;
              font-size: 16px;
              color: #767B93;
              line-height: 19px;

              span {
                color: #FF186B;
                font-size: 18px;
              }
            }
          }
        }

        .amount-test {
          font-family: Open Sans, Open Sans;
          font-weight: bold;
          font-size: 16px;
          color: #1E1714;
          line-height: 19px;
          text-align: center;
        }
      }
    }

    .join-sty {
      width: 100%;
      height: 232px;
      padding: 135px 0 49px 0;
      background: linear-gradient(169deg, rgba(255, 255, 255, 0.14) 6%, #FFFFFF 100%);
      border-radius: 16px 16px 16px 16px;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;

      .join-btn {
        max-width: 295px;
        padding: 10px 85px;
        background: #FF186B;
        border-radius: 62px;
        text-align: center;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 28px;
        color: #FFFFFF;
        line-height: 33px;
        text-wrap: nowrap;
        margin: 0 auto;
        cursor: pointer;
      }
    }
  }

  .agree-sty {
    text-align: center;
    margin-top: 41px;

    .rule-item {
      font-size: 16px;
      color: #1E1714;
      line-height: 26px;
      border-bottom: 1px solid;
    }

    :deep(.ivu-checkbox-wrapper) {
      font-family: Open Sans, Open Sans;
      font-weight: 400;
      font-size: 16px;
      color: #1E1714;
      line-height: 26px;

      .ivu-checkbox {
        .ivu-checkbox-inner {
          width: 21px;
          height: 21px;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #D8D8D8;
        }
      }

      .ivu-checkbox-checked {


        .ivu-checkbox-inner:after {
          width: 8px;
          height: 10px;
        }
      }

    }
  }
}
</style>
